<html>
  <head>
    <title></title>
    <style>
    
      @import url(micro-chart.css);
      
      #updating { width:64dip; }
      
      
      svg.chart.custom1 { 
        aspect: MicroChart.Donut( fill: red gold, thickness:0.2 )
                url(micro-chart.tis);
        size:64dip;
      }
      
      svg.chart.custom2 { 
        aspect: MicroChart.Donut( fill: red gold green, thickness:0.4 )
                url(micro-chart.tis);
        size:96dip;
      }
      
      svg.chart.custom3 { 
        aspect: MicroChart.Bar( fill: red gold green blue )
                url(micro-chart.tis);
        size:100dip 32dip;
      }

      svg.chart.custom4 { 
        aspect: MicroChart.Line( fill: gold, stroke: red, stroke-width:3px )
                url(micro-chart.tis);
        size:200dip 64dip;
      }
    
    </style>
    <script type="text/tiscript">
    
    $(#updating).timer(1s, function() {
      var random = rand(10);
      var values = this.value;
      values.shift();
      values.push(random);
      this.value = values;
      return true;
    });
    
    
    </script>
  </head>
<body>
  <p>
    Pie charts:
    <svg.chart.pie value="0/8" />
    <svg.chart.pie value="1/8" />
    <svg.chart.pie value="3/8" />
    <svg.chart.pie value="5/8" />
    <svg.chart.pie value="7/8" />
    <svg.chart.pie value="8/8" />
  </p>
  <p>
    Donut charts:
    <svg.chart.donut value="0/8" />
    <svg.chart.donut value="1/8" />
    <svg.chart.donut value="3/8" />
    <svg.chart.donut value="5/8" />
    <svg.chart.donut value="7/8" />
    <svg.chart.donut value="8/8" />
  </p>

  <p>
    Line charts:
    <svg.chart.line value="5,3,9,6,5,9,7,3,5,2" />
    <svg.chart.line value="5,3,2,-1,-3,-2,2,3,5,2" />
    <svg.chart.line value="0,-3,-6,-4,-5,-4,-7,-3,-5,-2" />
  </p>

  <p>
    Bar charts:
    <svg.chart.bar value="5,3,9,6,5,9,7,3,5,2" />
    <svg.chart.bar value="5,3,2,-1,-3,-2,2,3,5,2" />
    <svg.chart.bar value="0,-3,-6,-4,-5,-4,-7,-3,-5,-2" />
  </p>
  
  <p>
  Updating Chart: 
  <svg.chart.line #updating value="5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2" />
  </p>
  
  <p>
  Custom Chart styling: 
  <svg.chart.custom1 value="3/8" />
  <svg.chart.custom2 value="3,4,6" />
  <svg.chart.custom3 value="5,3,9,6,5,9,7,3,5,2" />
  <svg.chart.custom4 value="5,3,9,6,5,9,7,3,5,2" />
  </p>

</body>
</html>
